<template>
    <div class="particular-vip">
        <div class="homes">
            <label>{{ props.data.name }}</label>
            <div style="float: right; margin: 4px 4px 4px 16px">
                <el-button @click="mendes.save" :type="data.isfkuo ? 'primary' : 'success'">{{
                    data.bjok
                    }}</el-button>
                <el-button v-if="!data.isfkuo" @click="data.isfkuo = true" type="info">取消</el-button>
            </div>
            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
                <div @click="mendes.deloffline" class="bq">
                    <i class="iconfont icon-shanchu"></i>
                </div>
            </el-tooltip>
        </div>
        <div class="infos">
            <el-descriptions title="编辑线上客户" :column="2" border>
                <el-descriptions-item label="线上客户名称">
                    <el-tag v-if="data.isfkuo">{{ props.data.name }}</el-tag>
                    <el-input type="text" v-model="props.data.name" v-if="!data.isfkuo"
                        placeholder="请输入客户名称"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="客户手机">
                    <el-tag v-if="data.isfkuo">{{ props.data.phone1 }}</el-tag>
                    <el-input :prefix-icon="Iphone" v-model="props.data.phone1" v-if="!data.isfkuo" maxlength="11"
                        placeholder="请输入手机号码"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="负责人">
                    <el-tag>{{ props.data.adminId }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="客户电话">
                    <el-tag v-if="data.isfkuo">{{ props.data.phone2 }}</el-tag>
                    <el-input type="text" v-model="props.data.phone2" v-if="!data.isfkuo" maxlength="11"
                        placeholder="请输入电话号码"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="客户来源">
                    <el-tag v-if="data.isfkuo">{{ props.data.sourceName }}</el-tag>
                    <el-select v-model="props.data.source" clearable placeholder="请选择来源" v-if="!data.isfkuo">
                        <el-option v-for="item in date.customerSource" :key="item.id" :label="item.value"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="电子邮箱">
                    <el-tag v-if="data.isfkuo">{{ props.data.email }}</el-tag>
                    <el-input :prefix-icon="Message" v-model="props.data.email" v-if="!data.isfkuo"
                        placeholder="请输入电子邮箱"></el-input>
                </el-descriptions-item>
                <el-descriptions-item label="客户级别">
                    <el-tag v-if="data.isfkuo">{{ props.data.levelName }}</el-tag>
                    <el-select v-model="props.data.level" v-if="!data.isfkuo" clearable placeholder="请选择客户级别">
                        <el-option v-for="item in date.customerLevel" :key="item.id" :label="item.value"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="客户行业">
                    <el-tag v-if="data.isfkuo">{{ props.data.industryName }}</el-tag>
                    <el-select v-model="props.data.industry" v-if="!data.isfkuo" clearable placeholder="请选择行业">
                        <el-option v-for="item in date.customerIndustry" :key="item.id" :label="item.value"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="客户会员">
                    <el-tag>{{ props.data.VIPName? props.data.VIPName : "无" }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="客户账号">
                    <el-tag>{{ props.data.account }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-tag v-if="data.isfkuo">{{ props.data.markUp? props.data.markUp : "无" }}</el-tag>
                    <el-input v-model="props.data.markUp" :rows="2" type="textarea" autosize v-if="!data.isfkuo"
                        placeholder="请输入备注" />
                </el-descriptions-item>
                <el-descriptions-item label="下次联系时间">
                    <el-tag v-if="data.isfkuo">{{ props.data.nextConnectionTime }}</el-tag>
                    <el-date-picker v-model="props.data.nextConnectionTime" value-format="YYYY-MM-DD"
                        v-if="!data.isfkuo" type="datetime" placeholder="请选择日期" />
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    <el-tag v-if="data.isfkuo">{{ props.data.province }}</el-tag>
                    <el-cascader v-model="selectOptions" @change="mendes.chage" :options="optionsnative_place"
                        v-if="!data.isfkuo" placeholder="请选择地址" />
                </el-descriptions-item>
                <el-descriptions-item label="详细地址">
                    <el-tag v-if="data.isfkuo">{{ props.data.address? props.data.address : "无" }}</el-tag>
                    <el-input v-model="props.data.address" :rows="2" type="textarea" v-if="!data.isfkuo" autosize
                        placeholder="请输入详细地址" />
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div style="border: 1px solid #ddd;margin: 20px;"></div>
        <div style="margin-right: 21px;">
            <el-descriptions class="margin-top" title="线上订单" :column="3" border>
            </el-descriptions>
        </div>
        <div class="diss">
            <el-table v-loading="data.loading" element-loading-text="数据加载中..." empty-text="暂无数据"
                :row-key="(row: any) => row.id" stripe border :data="data.tableDatar"
                style="position: relative;right: 25px;width: 100%;height: 500px;padding-left:32px;">
                <el-table-column width="100" prop="payMan" label="支付人" />
                <el-table-column width="100" prop="originalPrice" label="原价" />
                <el-table-column width="100" prop="payPrice" label="实付" />
                <el-table-column width="100" prop="onlineCustomerDeductionId" label="抵扣卷" />
                <el-table-column width="100" prop="onlineCustomerDiscountId" label="折扣卷" />
                <el-table-column label="支付" property="isPay">
                    <template #default="scope">
                        <el-tag :type="scope.row.isPay === 0 ? 'success' : 'danger'">{{
                            scope.row.isPay == 1 ? "是" : "否"
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column sortable :show-overflow-tooltip="true" width="150" prop="createTime" label="创建时间" />
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, defineProps, ref, computed } from "vue";
import { Iphone, Message } from '@element-plus/icons-vue';
import { ElMessageBox } from "element-plus";
import { getCustomerIndustry, getCustomerLevel, getCustomerSource } from '@/api/Dictionarys/index';
import { getVipPackages, Get_dg_pak } from "@/api/Vip/VipPackages";
import { getOnlineOrders } from '@/api/OnlineOrders/index';
import { updateOnlineCustomers, deleteOnlineCustomers, getOnlineCustomersid } from '@/api/OnlineCustomers/index';
import { getVip } from "@/api/Vip/Vips";
import { toast } from "@/tools/tools";
// 级联地址
import {
    provinceAndCityData,
    regionData,
    pcTextArr,
    pcaTextArr,
    codeToText
} from 'element-china-area-data'

const optionsnative_place = pcaTextArr

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
        required: true,
    },
});
//来源
interface CustomerSource {
    id: string;
    value: string;
    dictionaryTypeId: string;
    createTime: string;
}
//客户行业
interface CustomerIndustry {
    id: string;
    value: string;
    dictionaryTypeId: string;
    createTime: string;
}
//客户级别
interface CustomerLevel {
    id: string;
    value: string;
    dictionaryTypeId: string;
    createTime: string;
}
//vip
interface Vip {
    id: string;
    name: string;
    createTime: string;
}
interface Date {
    customerSource: CustomerSource[];
    customerLevel: CustomerLevel[];
    customerIndustry: CustomerIndustry[];
    vip: Vip[];
}
const date = reactive<Date>({
    customerSource: [],
    customerLevel: [],
    customerIndustry: [],
    vip: [],
});
//地址
let selectOptions: any[] = [];
// 状态
const data = reactive({
    isfkuo: true,
    loading: false,
    tableData: [],
    tableDatar: [],
    bjok: "编辑",
    disVisible: false,
    dedVisible: false,
    pakVisible: false,
    discount: 0.5,
    deductionCount: 1,
    maxDiscountCount: 100,
});
const emit = defineEmits(["close-drawer"]);
const mendes = {
    async binds() {
        const res = await getCustomerSource();
        if (res.code === 0) {
            date.customerSource = res.data.data;
        }
    },
    async binder() {
        const res = await getCustomerIndustry();
        if (res.code === 0) {
            date.customerIndustry = res.data.data;
        }
    },
    async bindes() {
        const res = await getCustomerLevel();
        if (res.code === 0) {
            date.customerLevel = res.data.data;
        }
    },
    async bindet() {
        const res = await getVipPackages();
        if (res.code === 0) {
            date.vip = res.data.data;
        }
    },
    async bindert() {
        data.loading = true;
        const res = await getOnlineOrders({
            id: props.data.id
        })
        if (res.code === 0) {
            data.loading = false;
            data.tableDatar = res.data.data;
        }
    },
    chage() {
        console.log(selectOptions);
        props.data.province = selectOptions[0];
        props.data.city = selectOptions[1];
        props.data.county = selectOptions[2];
        console.log(props.data);
    },
    async save() {
        if (data.bjok == "编辑") {
            selectOptions = props.data.province.split("/");
            data.bjok = "保存";
            data.isfkuo = !data.isfkuo;
            return;
        }
        if (data.bjok == "保存") {
            props.data.province = selectOptions[0];
            props.data.city = selectOptions[1];
            props.data.county = selectOptions[2];
            const res = await updateOnlineCustomers({
                ...props.data,
            });
            if (res.code >= 0) {
                toast.success(res.message);
                emit("close-drawer");
            } else {
                toast.error(res.message);
            }
            data.bjok = "编辑";
            data.isfkuo = !data.isfkuo;
            return;
        }
    },
    async deloffline() {
        ElMessageBox.confirm("确定要删除吗?", "删除提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }).then(async () => {
            const res = await deleteOnlineCustomers({
                id: props.data.id,
            });
            if (res.code >= 0) {
                toast.success(res.message);
                emit("close-drawer");
            } else {
                toast.error(res.message);
            }
        });
    }
};
onMounted(() => {
    // data.id = route.params.id;
    mendes.binds();
    mendes.binder();
    mendes.bindes();
    mendes.bindet();
    mendes.bindert();
    // console.log(route.params.id)
});
</script>

<style scoped>
.particular-vip {
    width: calc(100% - 36px);
    height: calc(100% - 16px);
    padding: 10px 16px 14px 14px;
    background-color: #fff;
    border-radius: 10px;
}

.homes {
    height: 56px;
}

.homes label {
    font-size: 25px;
}

.bq {
    height: 30px;
    width: 35px;
    background-color: #f5f5f5;
    border-radius: 6px;
    margin: 4px;
    float: right;
    text-align: center;
    padding-top: 6px;
}

.bq:hover {
    background-color: #e6e6e6;
}

.infos {
    height: calc(100% - 450px);
}

.nhzdy {
    display: flex;
    width: 100%;
    height: 250px;
}

/* .diss {
    width: calc(50% - 8px);
    height: calc(250px - 8px);
    margin: 4px;
} */

.deds {
    width: calc(50% - 8px);
    height: calc(250px - 8px);
    margin: 4px;
}
</style>